<template>
    <el-container style="height:100%; border: 0px solid #000">
      <el-main>
        <el-row>
          <el-col :span="3">
            <el-tooltip class="item" effect="dark" :content="$t('base.create')" placement="top">
              <el-button type="primary" icon="el-icon-edit" @click="addBtnClick">{{$t('base.create')}}</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('base.refresh')" placement="top">
              <el-button type="info" icon="el-icon-refresh" circle @click="handleRefresh"></el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
            <el-input placeholder="请输入内容" v-model="serach">
              <el-button slot="append" icon="el-icon-search" @click="requestGridData"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          stripe
          :height="tableHeight"
          style="width: 100%;"
          border
          v-loading="loading"
          element-loading-text="数据加载中。。。"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" v-if="false" label="主键" width="0"></el-table-column>
          <el-table-column prop="name" :label="$t('lookup.name')" width="300"></el-table-column>
          <el-table-column prop="code" :label="$t('lookup.code')" width="300"></el-table-column>
          <el-table-column prop="enable" :label="$t('lookup.enable')" width="300"></el-table-column>
          <el-table-column prop="sortno" :label="$t('lookup.sortno')" width="300"></el-table-column>
          <el-table-column :label="$t('base.action')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-popover placement="top" :ref="'popover-'+ scope.row.id">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleDelete(false,scope.$index, scope.row)"
                  >取消</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleDelete(true,scope.$index, scope.row)"
                  >确定</el-button>
                </div>
                <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </el-main>
      <v-dialog
        :title="title"
        :dialogVisible="dialogVisible"
        :lookup="lookup"
        @dialogClose="dialogClose"
        @dialogSave="dialogSave"
      ></v-dialog>
    </el-container>
</template>
<script>
import vDialog from "./Dialog";
export default {
  //初始化数据
  data() {
    return {
      tableHeight: window.innerHeight - 180,
      serach: "",
      tableData: [],
      currentPage: 1,
      pagesize: 10,
      total: 500,
      loading: false,
      title: "",
      dialogVisible: false,
      treeNode: {},
      lookup: {
        id: "",
        name: "",
        code: "",
        sortno: "",
        remark: ""
      }
    };
  },
  components: {
    //自定义标签
    "v-dialog": vDialog
  },
  //方法
  methods: {
    //每页显示数据个数变化时调用
    handleSizeChange(val) {
      this.pagesize = val;
      this.requestGridData();
    },
    //页码变化时调用
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestGridData();
    },
    //编辑
    handleEdit(index, row) {
      this.lookup = Object.assign({}, row);
      this.dialogVisible = true;
      this.title = "编辑表单";
    },
    //删除
    handleDelete(flag, index, row) {
      this.$refs["popover-" + row.id].doClose();
      var _this = this;
      if (flag) {
        this.axios
          .post(this.HOST + "/delete", row)
          .then(function(res) {
            console.log(res);
            debugger;
            _this.handleRefresh();
            _this.$message({
              message: "操作成功!",
              type: "success"
            });
          })
          .catch(function(err) {
            _this.$message.error("操作失败" + err);
          });
      }
    },
    //新增按钮事件
    addBtnClick() {
      this.dialogVisible = true;
      this.title = "新增表单";
    },
    //
    lookBtnClick() {
      this.$message({
        type: "success",
        message: "点击了查看按钮"
      });
    },
    //刷新按钮
    handleRefresh() {
      this.requestGridData();
    },
    //关闭按钮 子组件和父组件通信
    dialogClose(data) {
      console.log(data);
      this.retLookup();
      this.dialogVisible = false;
    },
    //保存按钮  子组件和父组件通信
    dialogSave() {
      this.retLookup();
      this.dialogVisible = false;
      this.requestGridData();
    },
    //请求数据
    requestGridData() {
      var _this = this;
      this.axios
        .post(this.HOST + "/page", {
          page: _this.currentPage,
          rows: _this.pagesize,
          pid: _this.treeNode.id,
          name: _this.serach
        })
        .then(function(res) {
          res = res.data;
          if (res.status == "1") {
            _this.tableData = res.data.rows;
            _this.total = res.data.total;
          } else {
            console.log(res.stackmessage);
          }
          _this.loading = false;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    //子组件数据清空
    retLookup() {
      this.lookup = {
        id: "",
        name: "",
        code: "",
        sortno: "",
        remark: ""
      };
    }
  },
  //加载时调用方法 函数
  mounted() {
    var _this = this;
    _this.EventBus.$on("refreshGrid", treeNode => {
      _this.treeNode = treeNode;
      _this.requestGridData();
    });
  }
};
</script>
<style scoped>
.el-col {
  margin-bottom: 10px;
}
.el-pagination {
  position: absolute;
  right: 20px;
  margin-top: 25px;
}
.el-popover__reference {
  margin-left: 10px;
}
</style>

